<script setup>
import {useRoute, useRouter} from "vue-router";
import {useThemeStore} from "@/stores/themeModel.js";
import {toRefs} from "vue";

const themeStore = useThemeStore()

const {theme, setTheme} = toRefs(themeStore)  // 变成响应式
</script>

<template>
  <!--
    1 fixed不会预留布局空间, 会导致page被遮住
    2 设置背景可以防止出现元素从下面穿过(navbar好像透明一样)的样式(有背景, 元素滚动到navbar下面就会被遮住)
   -->
  <header class="sticky top-0 left-0 bg-white shadow-md w-screen h-18 p-2 flex flex-row gap-2 items-center z-10">
    <img alt="Vue logo" class="ml-12 size-12 logo" src="@/assets/vue.svg"/>

    <div class="flex-[1] wrapper flex flex-row ml-6">
      <nav class="flex flex-row gap-6">
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>

    <!-- search -->
    <div class="flex-[2] w-[50%] h-8 flex flex-row gap-2 items-center ">
      <input type="text" class="hidden md:block w-full h-8 border rounded-md "/>
      <img class="size-6" src="@/assets/search.png" alt=""/>
    </div>

    <div class="flex-1 flex flex-row gap-2 items-center justify-end mr-12">
      <span class="cursor-pointer" @click="setTheme(
          theme==='light'?'dark':'light'
      )">{{ theme === 'light' ? '日🌞' : '夜🌙' }}</span>
      <img class="size-10" src="@/assets/vue.svg" alt="">
    </div>
  </header>
</template>

<style scoped>

</style>